<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); ?>

<div class="box">
	<div class="box-header">
		<h3 class="box-title"><?=$this->lang->line("UPLOADED_IMAGES")?></h3>
	</div>

	<div class="box-body">
		<? if(count($getEnt2image)) { ?>
			<? foreach($getEnt2image as $ii => $e2i) { ?>
				<div class="col-md-4">
					<div class="box box-solid">
						<div class="box-header">
							<p class="box-tools pull-left text-muted"><?=$e2i["e2iResizedWidth"]?>x<?=$e2i["e2iResizedHeight"]?></p>
							<div class="box-tools pull-right">
								<button class="btn btn-xs btn-primary" data-image="<?=$e2i["e2iId"]?>" data-image-alt="<?=$e2i["e2iAlt"]?>" title="<?=$this->lang->line("ADD_EDIT_TEXT")?>"><span class="glyphicon glyphicon-list-alt"></span></button>
								<button class="btn btn-xs btn-primary <?=(($e2i["e2iResizedWidth"] >= 660 and $e2i["e2iResizedHeight"] >= 350) ? "" : "disabled")?>" <?=(($e2i["e2iResizedWidth"] >= 660 and $e2i["e2iResizedHeight"] >= 350) ? "data-image=\"".$e2i["e2iId"]."\" data-image-resized=\"".$e2i["e2iImageNameResized"]."\" data-image-resized-width=\"".$e2i["e2iResizedWidth"]."\" data-image-resized-height=\"".$e2i["e2iResizedHeight"]."\"" : "")?> title="<?=$this->lang->line("IMAGE_CROP")?>"><span class="glyphicon glyphicon-resize-small"></span></button>
								<button class="btn btn-xs btn-danger <?=($e2i["e2iCropped"] == "I" ? "" : "disabled")?>" title="<?=$this->lang->line("REMOVE_FROM_SLIDER")?>" <?=($e2i["e2iCropped"] == "I" ? "data-image-remove-slider=\"".$e2i["e2iId"]."\"" : "")?>><span class="glyphicon glyphicon-remove-circle"></span></button>
								<button class="btn btn-xs btn-danger" data-image-delete="<?=$e2i["e2iId"]?>" title="<?=$this->lang->line("DELETE")?>"><span class="glyphicon glyphicon-remove-circle"></span></button>
							</div>
						</div>
						<div class="box-body">
							<div style="height:110px; width: <?=$e2i["e2iThumbWidth"]?>px; margin-left: auto; margin-right: auto;">
								<a class="zoomer fancybox" href="<?=MEDIA?>../uploads/<?=$e2i["e2iImageName"]?>" data-fancybox-title="<?=$e2i["e2iAlt"]?>">
									<span class="overlay-zoom ">
										<img class="img-responsive" src="<?=MEDIA?>../uploads/<?=$e2i["e2iImageNameThumb"]?>" title="<?=$e2i["e2iAlt"]?>" /><span class="zoom-icon"></span>
									</span>
								</a>
							</div>
							<div class="clearfix"></div>
						</div>
						<div class="box-footer">
							<p class="text-muted" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"><?=($e2i["e2iAlt"] ? $e2i["e2iAlt"] : "&nbsp;")?></p>
						</div>
					</div>
				</div>
			<? 
				if($ii%3 == 2)
					echo	"<div class=\"clearfix\"></div>";
			} ?>
		<? } else { ?>
			<div class="col-xs-12">
				<div class="callout callout-warning"><?=$this->lang->line("NO_IMAGE_AVAILABLE")?></div>
			</div>
		<? } ?>
		<div class="clearfix"></div>
	</div>

</div>


<div class="box">
	<div class="box-header">
		<h3 class="box-title"><?=$this->lang->line("UPLOADING_IMAGES")?></h3>
	</div>

	<div class="box-body">
		<form class="fileuploadForm" action="<?=site_url("admin_lte/file_upload")?>" method="POST" enctype="multipart/form-data">

			<?php
			echo	form_hidden("ENTITY", $this->input->post("ENTITY"));
			echo	form_hidden("ID", $this->input->post("ID"));
			?>
			<div class="fileBox">
				<div class="row">
					<div class="col-sm-5 text-center">
						<span class="btn btn-success fileinput-button">
							<span><?=$this->lang->line("BROWSE")?></span>
							<input type="file" name="Filedata">
						</span>
					</div>
					<div class="col-sm-2 text-center" style="padding: 4px 8px;"><span class="text-muted"> OR </span></div>
					<div class="col-sm-5 text-center" style="padding: 4px 8px;"><?=$this->lang->line("DROP_A_FILE_INTO_THIS_BOX")?></div>
				</div>
			</div>

			<div class="progress-bar" style="display: none;">
				<div class="progress progress-success progress-striped">
					<div class="bar"></div>
				</div>
			</div>

		</form>
	</div>
</div>

<script>
	$(function() {
		$('.fileuploadForm').each(function () {
			var id = $(this).attr('id');
			$(this).fileupload({
				url: '<?=site_url("admin_lte/file_upload")?>',
				dropZone: '.fileBox',
				dataType: 'json',
				start: function(e) {
					$('.progress-bar').show();
					$('.fileBoxError').remove();
				},
				done: function (e, data) {
					if(data.jqXHR.responseJSON.success) {
						imageDisplayRefresh();
					}
					if(data.jqXHR.responseJSON.error) {
						$('<div class="fileBoxError callout callout-danger">' +
							data.jqXHR.responseJSON.error + '</div>').insertBefore('.fileBox');
					}
					$('.progress-bar').hide();
				},
				progressall: function (e, data) {
					var progress = parseInt(data.loaded / data.total * 100, 10);
					$('.progress-bar .bar').css(
						'width',
						progress + '%'
					);
				}
			});
		});
		
		$('[title]').tooltip();

		$(".fancybox").fancybox();

		$('button[data-image-resized]').on('click', function(e) {
			e.preventDefault();
			$this = $(this);
			$('#studyEditorModal .modal-title').html('<?=$this->db->escape_str($this->lang->line("IMAGE_CROP"))?>');
			$('#studyEditorModal .modal-body form').html('<div class="bootstrap-modal-cropper text-center"><div style=" margin-left:auto; margin-right:auto; width: ' + $this.data('imageResizedWidth') + 'px; height: ' + $this.data('imageResizedHeight') + 'px"><img src="<?=MEDIA?>../uploads/' + $this.data('imageResized') + '" alt="" /></div></div>');
			$('#studyEditorModal .modal-body form').append('<input type="hidden" name="height" value="350" /><input type="hidden" name="width" value="660" /><input type="hidden" name="x" value="0" /><input type="hidden" name="y" value="0" />')

			$('#studyEditorModal button.btn-success').data('url', '<?=site_url("admin_lte/image_crop")?>' + $this.data('image'));
			$('#studyEditorModal').css('z-index', 1060).modal('toggle');

			$('#studyEditorModal').on('shown.bs.modal', function (e) {
				$('#studyEditorModal .modal-body form img').cropper({
					data: {
						x: 0,
						y: 0,
						width: 660,
						height: 350
					},
					minWidth: 660,
					maxWidth: 660,
					minHeight: 350,
					maxHeight: 350,
					resizable: false,
					zoomable: false,
					rotatable: false,
					dashed: false,
					done: function(data) {
						$('[name="height"]').val(data.height);
						$('[name="width"]').val(data.width);
						$('[name="x"]').val(data.x);
						$('[name="y"]').val(data.y);
					}
				});
			});
		});

		$('button[data-image-remove-slider]').on('click', function(e) {
			e.preventDefault();
			$this = $(this);

			$.ajax({
				type: "POST",
				cache: false,
				data: { remove: 1 },
				url: '<?=site_url("admin_lte/image_crop")?>' + $this.data('imageRemoveSlider'),
				success: function (result) {
					imageDisplayRefresh();
				},
				error: function (error) {}
			});

		});

		$('button[data-image-alt]').on('click', function(e) {
			e.preventDefault();
			$this = $(this);

			$.ajax({
				type: "POST",
				cache: false,
				data: { e2iId: $this.data('image') },
				url: '<?=site_url("admin_lte/get_ent2image_template")?>',
				beforeSend: function() {
					$('#studyEditorModal .modal-title').html('<?=$this->db->escape_str($this->lang->line("ADD_EDIT_TEXT"))?>');
					$('#studyEditorModal .modal-body form').html('<?=$this->db->escape_str($this->lang->line("PLEASE_WAIT,_PROCESSING_IN_PROGRESS"))?>');
					$('#studyEditorModal').css('z-index', 1060).modal('toggle');
				},
				success: function (result) {
					$('#studyEditorModal button.btn-success').data('url', '<?=site_url("admin_lte/ent2image_insert_update")?>');
					$('#studyEditorModal .modal-body form').html(result);
					$('#e2i_alt').val($this.data('imageAlt'));
				},
				error: function (error) {}
			});

		});

		$('button[data-image-delete]').unbind('click').on('click', function() {
			$this = $(this);
			$('#studyDeleteModal .modal-title').html('<?=$this->lang->line("DELETE")?>');
			$('#studyDeleteModal .modal-body form').html('<?=$this->db->escape_str($this->lang->line("ARE_YOU_SURE_YOU_WOULD_LIKE_TO_DELETE_THE_IMAGE"))?>');
			$('#studyDeleteModal .modal-body form').append('<input type="hidden" name="del" value="1" /><input type="hidden" name="e2iId" value="' + $this.data('imageDelete') + '" />');
			$('#studyDeleteModal button.btn-danger').data('url', '<?=site_url("admin_lte/ent2image_insert_update");?>');
			$('#studyDeleteModal').modal('toggle');
		});

	})
</script>